import Axios from "axios"
import { Component} from "react"
import { Row, Col, Image, Spin   } from 'antd';
import "./index.scss"
class App extends Component {
  constructor() {
    super()
    this.state = {
      list: [],
      page: 1,
      loading: false
    }
    this.time = null;
  }

  loading = (page = 1) => {
    this.setState({
      loading: true
    })
    Axios.get("/api", {
      params: {
        tf_id: "TFM00R0_254",
        page: page,
        size: 10
      }
    }).then(result => {
      this.setState({
        list: [...this.state.list, ...result.data.result],
        loading: false
      })
    })
  }

  componentDidMount() {
    // 自动发起一个请求
    this.loading(this.state.page)
    // 开启监听滚动事件
    window.onscroll = () => {
      clearTimeout(this.time)
      this.time = setTimeout(() =>  {
        // 公式：dh 页面整体高 - 200 - sh卷上去的页面的高 < wh屏幕可见的高
      const dh = document.documentElement.scrollHeight;
      const sh = document.documentElement.scrollTop;
      const wh = document.documentElement.clientHeight;
        if (dh - 200 - sh < wh) {
          // 请求下一页的数据
          this.setState({ page: this.state.page + 1 })
          this.loading(this.state.page)
        }
      }, 500)
    }
  }

  render() {
    return <div>
      {
        this.state.loading && <Spin className='Spin-box'></Spin>
      }
      <Row gutter={[0, 10]}>
        {
          this.state.list.map(item => {
            return <Col key={item.goods_id} span={12} >
              {/* 图片 */}
              <Image src={item.hd_thumb_url}></Image>
              {/* 文字 */}
              <p> {item.goods_name} </p>
            </Col>
          })
        }
      </Row>
    </div>
  }
}
export default App;